<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<!-- import CSS -->
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<!-- import Vue before Element -->
		<script src="/html/vue.js"></script>
		<!-- import JavaScript -->
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	</head>
	<body>
		<div id="app" style='width: 100%; height: 100%;'>
			<el-container style="height: 100%; border: 1px solid #eee">
				<el-aside width="200px">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>文章</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>
								<!-- <el-menu-item index="1-1" class="el-menu-item is-active"><el-link href="#">文章管理</el-link></el-menu-item> -->
								<el-link href="#">
									<el-menu-item index="1-1" class="el-menu-item is-active">文章管理</el-menu-item>
								</el-link>
								<el-link href="/index.php/admin_to/write_news" target="_blank" :underline="false">
									<el-menu-item index="1-2">文章编写</el-menu-item>
								</el-link>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-link href="/index.php/admin_to/modify">
									<el-menu-item index="1-3">文章修改</el-menu-item>
								</el-link>
								<el-link href="/index.php/admin_to/view">
									<el-menu-item index="1-4">文章查看</el-menu-item>
								</el-link>
							</el-menu-item-group>
							<el-submenu index="1-4">
								<template slot="title">分类</template>
								<el-link href="/index.php/admin_to/classification">
									<el-menu-item index="1-4-1">文章分类</el-menu-item>
								</el-link>
							</el-submenu>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title"><i class="el-icon-menu"></i>资源</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>

								<el-link href="/index.php/admin_to/video_material">
									<el-menu-item index="2-1">视频管理</el-menu-item>
								</el-link>

								<el-menu-item index="2-2">选项2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-menu-item index="2-3">选项3</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="2-4">
								<template slot="title">选项4</template>
								<el-menu-item index="2-4-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title"><i class="el-icon-setting"></i>导航三</template>
							<el-menu-item-group>
								<template slot="title">分组一</template>

								<el-link href="/index.php/admin_to/teacher_list">
									<el-menu-item index="3-1">老师信息列表</el-menu-item>
								</el-link>

								<el-link href="#">
									<el-menu-item index="3-2">信息操作层</el-menu-item>
								</el-link>

							</el-menu-item-group>
							<el-menu-item-group title="分组2">
								<el-link href="/index.php/admin_to/course_list">
									<el-menu-item index="3-3">课程信息列表</el-menu-item>
								</el-link>
								<el-menu-item index="3-4">信息操作层</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="分组3">
								<el-link href="/index.php/admin_to/equipment_list">
									<el-menu-item index="3-5">设备信息列表</el-menu-item>
								</el-link>
								<el-menu-item index="3-6">信息操作层</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="3-7">
								<template slot="title">选项4</template>
								<el-menu-item index="3-7-1">选项4-1</el-menu-item>
							</el-submenu>
						</el-submenu>
					</el-menu>
				</el-aside>

				<el-container>
					<el-header style="text-align: right; font-size: 12px">
						<el-dropdown @command="user_list">
							<i class="el-icon-setting" style="margin-right: 15px"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="a">查看</el-dropdown-item>
								<el-dropdown-item command="b">新增</el-dropdown-item>
								<el-dropdown-item command="c">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<span>{{ name }}</span>
					</el-header>
					<el-main>
						<el-breadcrumb separator="/" style='padding-bottom: 20px;'>
							<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item><strong>文章管理</strong></el-breadcrumb-item>
						</el-breadcrumb>

						<div>
							<h4>筛选</h4>
							<template>
								<el-select v-model="category" placeholder="请选择分类" clearable>
									<el-option v-for="item in category_arrs" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
								<el-input placeholder="请输入标题" prefix-icon="el-icon-search" v-model="like" style='width: 200px; margin-left: 20px;'>
								</el-input>
								<el-button type="primary" plain style='margin-left: 20px;' v-on:click="inquire()">查询</el-button>
							</template>
						</div>

						<template>
							<el-table :data="tableData" border style="width: 100%;margin-top: 40px;" stripe fixed>
								<el-table-column prop="title" label="标题" width="180">
								</el-table-column>
								<el-table-column prop="introduction" label="新闻简介" width="180">
								</el-table-column>
								<el-table-column prop="category_name" label="新闻类别" width="180">
								</el-table-column>
								<el-table-column prop="time" label="发布时间" sortable>
								</el-table-column>
								<el-table-column label="操作" width="150">
									<template slot-scope="scope">
										<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
										<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
										<el-button type="text" size="small" @click="delete_news(scope.row)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>

							<el-row style='margin-top: 20px;'>
								<el-col :span="12">
									<el-pagination background layout="prev, pager, next" :page-size="limit" :total="conunt" @current-change="handleCurrentChange">
									</el-pagination>
								</el-col>
							</el-row>
						</template>
					</el-main>

				</el-container>
			</el-container>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						page: 1,
						limit: 10,
						like: "", //标题
						category: "", //文章类别
						tableData: [],
						name: "admin",
						conunt: 1000,
						category_arrs: [{
							value: '1',
							label: '栏目A'
						}, {
							value: '2',
							label: '栏目B'
						}, {
							value: '3',
							label: '栏目C'
						}]
					}
				},
				methods: {
					go_session_null() {
						sessionStorage.setItem("id", "");
						sessionStorage.setItem("title", "");
						sessionStorage.setItem("title_url", "");
						sessionStorage.setItem("introduction", "");
						sessionStorage.setItem("time", "");
						sessionStorage.setItem("content", "");
						sessionStorage.setItem("category", "");
					},
					handleClick(row) {
						var me = this;
						//console.log(row);
						me.go_session_null();
						sessionStorage.setItem("id", row.id);
						sessionStorage.setItem("title", row.title);
						sessionStorage.setItem("title_url", row.title_url);
						sessionStorage.setItem("introduction", row.introduction);
						sessionStorage.setItem("time", row.time);
						sessionStorage.setItem("content", row.content);
						sessionStorage.setItem("category", row.category);
						window.location.href = "/index.php/admin_to/view";
					},
					edit(scope) {
						var me = this;
						//console.log(scope);
						me.go_session_null();
						sessionStorage.setItem("id", scope.id);
						sessionStorage.setItem("title", scope.title);
						sessionStorage.setItem("title_url", scope.title_url);
						sessionStorage.setItem("introduction", scope.introduction);
						sessionStorage.setItem("time", scope.time);
						sessionStorage.setItem("content", scope.content);
						sessionStorage.setItem("category", scope.category);
						window.location.href = "/index.php/admin_to/modify";
					},
					delete_news(row) {
						//console.log(row);
						this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							axios.get('/index.php/news/delete_news', {
									params: {
										id: row.id
									}
								})
								.then(function(response) {
									//console.log(response);
									location.reload();
								})
								.catch(function(error) { // 请求失败处理
									//console.log(error);
								});
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						});
					},
					handleCurrentChange(val) {
						var me = this;
						//console.log(val);
						//sessionStorage.setItem("page", val);
						axios.get('/index.php/news/select_news', {
								params: {
									page: val,
									limit: me.limit,
									like: me.like,
									category: me.category
								}
							})
							.then(function(response) {
								//console.log(response);
								me.tableData = response.data;
							})
							.catch(function(error) { // 请求失败处理
								//console.log(error);
							});
					},
					inquire() {
						var me = this;
						axios.get('/index.php/news/select_news', {
								params: {
									page: me.page,
									limit: me.limit,
									like: me.like,
									category: me.category
								}
							})
							.then(function(response) {
								//console.log(response);
								me.tableData = response.data;
							})
							.catch(function(error) { // 请求失败处理
								//console.log(error);
							});
					},
					user_list(command) {
						if (command == "c") {
							axios.get('/index.php/server/login/ex_login', {
									params: {}
								})
								.then(function(response) {
									//console.log(response);							
									window.location.href = "/index.php/server/login/go";
									return
								})
								.catch(function(error) { // 请求失败处理
									//console.log(error);
								});

						}
						//console.log(command);
						var username = sessionStorage.getItem("name");
						if (username != 'admin') {
							this.$message({
								message: '只有admin账户拥有此权限！',
								type: 'warning'
							});
							return;
						}
						window.location.href = "/index.php/admin_to/user_list";
					}
				},
				mounted: function() {
					var me = this;
					//console.log('beforeMount');
					//获取总数
					axios.get('/index.php/news/news_count', {
							params: {}
						})
						.then(function(response) {
							//console.log(response);
							me.conunt = response.data.count;
						})
						.catch(function(error) { // 请求失败处理
							//console.log(error);
						});

					//获取有没有like
					//获取有没有分类选择
					//查询
					axios.get('/index.php/news/select_news', {
							params: {
								page: me.page,
								limit: me.limit,
								like: me.like,
								category: me.category
							}
						})
						.then(function(response) {
							//console.log(response);
							me.tableData = response.data;
						})
						.catch(function(error) { // 请求失败处理
							//console.log(error);
						});

					axios.get('/index.php/server/classification/select', {
							params: {
								page: 1,
								limit: 1000
							}
						})
						.then(function(response) {
							//console.log(response);
							me.category_arrs = response.data;
						})
						.catch(function(error) { // 请求失败处理
							//console.log(error);
						});
					me.name = sessionStorage.getItem("name");
				}
			})
		</script>
		<style>
			.el-header {
				background-color: #D9ECFF;
				color: #303133;
				line-height: 60px;
			}
		</style>
	</body>
</html>
